<template>
  <div class="all-project">
    <div>审核项目</div>
      <a-table
        rowKey="id"
        :columns="columns1"
        :data-source="data1"
        bordered
        :pagination="pagination"
      >
        <!-- 进度 -->
        <template slot="schedule">
          <a href>查看</a>
        </template>
        <template slot="status" slot-scope="text">
          <!-- 根据返回的数据进行判断审核状态 -->
          <span v-if="text == 91" style="color:blue;">审核成功</span>
          <span v-if="text == 92" style="color:blue;">出函</span>
          <span v-else-if="text == -1" style="color: #e6e6e6">审核失败</span>
          <span v-else-if="text == 1" style="color: black">已保存</span>
          <!-- status是2、3、4都为审核状态 -->
          <span v-else style="color: red">审核中</span>
        </template>
        <!-- slot-scope="text,record" -->
        <template slot="action" >
          <!-- 点击同意弹出对话框（model） 多文本输入框 -->
          <!-- 用isAble来控制同意和拒绝按钮的使用（组长同意后status变为3，则管理层同意/拒绝按钮禁用）
                使用了三元表达式
          -->
          <a-button
            type="primary"
            size="small"
            icon="check"
          >同意</a-button>
          <!--  @click="submit(text,record)" -->
          <a-modal v-model="isAgree" title="你确定同意此项目吗？" >
            <template>
              <div>请输入原因</div>
              <a-textarea v-model="agreeInput" placeholder="同意原因" :rows="4" />
            </template>
          </a-modal>
          <!--  -->
          <a-button
            type="danger"
            size="small"
            icon="close"
          >拒绝</a-button>
          <a-modal v-model="isRefuse" title="你确定不同意此项目吗？" >
            <template>
              <div>请输入原因</div>
              <a-textarea v-model="refuseInput" placeholder="拒绝原因" :rows="4" />
            </template>
          </a-modal>
        </template>
      </a-table>
  </div>
</template>

<script>
import { mapState } from "vuex";

const columns1 = [
  {
    title: "序号",
    width: 70,
    // 序号自增排列
    customRender: (text, record, index) => `${index + 1}`,
    key: "projectId",
    fixed: "left",
    align: "center",
  },
  {
    title: "项目名称",
    width: 150,
    dataIndex: "name",
    key: "name",
    fixed: "left",
    align: "center",
  },
  {
    title: "联系人",
    width: 150,
    dataIndex: "createUsername",
    key: "1",
    align: "center",
  },
  { title: "金额", dataIndex: "amount", key: "2", align: "center" },
  { title: "保函品种", dataIndex: "guaranteeKind", key: "3", align: "center" },
  { title: "保函类型", dataIndex: "guaranteeType", key: "4", align: "center" },
  // { title: "进度", dataIndex: "", key: "5", align: "center" },
  {
    title: "进度",
    dataIndex: "",
    key: "5",
    align: "center",
    scopedSlots: { customRender: "schedule" },
  },
  { title: "时间", dataIndex: "createTime", key: "6", align: "center" },
  // { title: "审核状态", dataIndex: "status", key: "7",align: 'center' },
  {
    title: "审核状态",
    dataIndex: "status",
    align: "center",
    scopedSlots: { customRender: "status" },
  },
  {
    title: "Action",
    key: "operation",
    align: "center",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  name: "ProjectReview",
  data() {
    return {
      data1: [],
      columns1,
      isAgree:false,
      isRefuse:false,
      agreeInput:'',
      refuseInput:'',
      // 表格分页问题
      pagination: {
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
    };
  },
  async created() {
    console.log(this.auser.userId,this.auser.roleName)
    this.$get("/project/list",{
      // 找不到companyId
      companyId:42,
    }).then((res) => {
      console.log("2222", res.data.rows);
      this.data1 = res.data.rows;
    });
  },
   computed: {
    ...mapState({
      auser: (state) => state.account.user,
      roles: (state) => state.account.roles,
    }),
  },
};
</script>

<style scoped>
.all-project {
  widows: 100%;
}
</style>
